<template>
	<ul class="list1">
		<div class="list2">
			<li v-for="item in items" :keys="item.id">{{ item }}</li>
		</div>
		<div class="list3">
			<li v-for="item in items" :keys="item.id">{{ item }}</li>
		</div>
	</ul>
</template>

<script>
export default {
	data() {
		return {
			items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
		}
	},
	components: {

	},
	mounted() {
		this.moveFn()
	},
	methods: {
		moveFn() {
			let box1, box2, box3;
			box1 = document.querySelector(".list1");
			box2 = document.querySelector(".list2");
			box3 = document.querySelector(".list3");
			setInterval(()=>{
				console.log(box3.offsetTop , box1.scrollTop,box2.offsetHeight);
			// console.log(box1.scrollTop, box2.scrollHeight);
			},1000)
			setInterval(() => {
				// if (box3.offsetTop - box1.scrollTop <= 0) {
				if (box2.scrollHeight - box1.scrollTop <= 0) {
					// console.log(box1.scrollTop , box2.offsetHeight);
					box1.scrollTop -= box2.offsetHeight;
				}
				else {
					box1.scrollTop++;//demo向上滚动一个像素
				}
			}, 50);
		}
	},
}

</script>
<style scoped lang='scss'>
.list1 {
	border: 1px solid red;
	width: 200px;
	height: 100px;
	overflow: hidden;
	overflow-y: scroll;
	color: white;
	position: relative;
}
</style>